import { App } from "vue";
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import LoginVue from "../views/Login/index.vue";
import { useUserStore } from "@/store";
import { user } from "@/api";

const routes: RouteRecordRaw[] = [
  {
    path: "/login",
    name: "login",
    // 一般来说，项目的第一个进入的页面不要使用 路由懒加载
    component: LoginVue,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 一般控制动态的路由是写在 全局前置守卫里面
router.beforeEach((to, from, next) => {
  console.log(from.path);

  // pinia 里面的数据，一定要在 函数部分使用 useXXX 获取
  const userStore = useUserStore();
  let token = localStorage.getItem("token");

  // 如果没有登录，只让用户访问 login
  if (!token && to.path !== "/login") {
    next("/login");
  }
  // 如果已经是登录状态，用户手动访问 /login  强制跳回  之前的页面
  else if (token && to.path === "/login") {
    // 强制跳转回 来的地方
    next(from.path);
  }
  // 无论是登录后，还是 刷新后， 只要token还在就需要保持 用户的 菜单数据要有
  // 让路由每次跳转的时候，都检查一下，有没有 菜单数据 ，如果没有就需要重新请求
  //   如果是刷新后，from.path 永远是 /
  else if (
    token &&
    userStore.menus.length === 0 &&
    router.getRoutes().length === 1 &&
    (from.path === "/" || from.path === "/login")
  ) {
    // 登录成功后，需要请求用户的菜单数据
    user.userInfoApi().then((res) => {
      if (res.code === 200) {
        // 得到了 该用户所有的菜单数据 等等
        // 把数据存到 pinia
        // console.log(res.data);
        userStore.menus = res.data.menus;
        // 为了不和store里面的数据冲突，把数据进行一份拷贝
        const menus: IMenu[] = JSON.parse(JSON.stringify(res.data.menus));
        // 现在直接使用 userStore.menu 进行生成动态路由
        const parents: IActiveMenu[] = menus.filter(
          (menu) => menu.parentId === 0
        );
        menus.forEach((menu) => {
          // p 就是就一级路由
          const p = parents.find((p) => p.id === menu.parentId);
          if (p) {
            if (!p.children) {
              p.children = [];
            }
            p.children.push(menu);
          }
        });
        // 菜单数据回来了，可以生成动态路由了
        parents.forEach((parent) => {
          const route: RouteRecordRaw = {
            // parent是一级菜单，一级菜单对应一级路由
            path: "/" + parent.name,
            name: parent.name,
            // 注意： 所有的一级路由其实都是对应 home/index.vue
            component: () => import("../views/Home/index.vue"),
            children: [],
            meta: {
              title: parent.title,
            },
          };
          //   然后添加子路由
          parent.children?.forEach((child) => {
            route.children.push({
              // path ===>  /一级/二级
              path: `/${parent.name}/${child.name}`,
              name: child.name,
              component: () =>
                import(`../views/${parent.name}/${child.name}.vue`),
              meta: {
                title: child.title,
              },
            });
          });
          // addRoute方法添加路由配置不是同步生效的，需要我们等等再进入
          router.addRoute(route);
        });

        router.addRoute({
          path: "/",
          name: "home",
          redirect: "/index",
          component: () => import("../views/Home/index.vue"),
          children: [
            {
              path: "/index",
              name: "index",
              component: () => import("../views/index/index.vue"),
            },
          ],
        });
        // 你想去哪，就是to.path
        // console.log(to);
        next(to.fullPath);
      }
    });
  } else {
    next();
  }
});

export default (app: App<Element>) => {
  app.use(router);
};

export { router };
